<template>
  <div >
    <div v-if="messageStatus">
      <n-card title="主题插件" header>
  
      </n-card>
        
      <div class="cotentClass">
        <div class="themeClass">
          <n-form :model="formValue">
            <n-form-item label="主体颜色" path="main_color" :rule="rules">
              <n-color-picker style="width:200px" on-update:value="" v-model:value="formValue.main_color" :show-alpha="true" :swatches="swatches" size="small"/>
            </n-form-item>
            <n-form-item label="辅助颜色" path="assist_color" :rule="rules">
              <n-color-picker style="width:200px" on-update:value="" v-model:value="formValue.assist_color" :show-alpha="true" :swatches="swatches" size="small"/>
            </n-form-item>
            <n-form-item label="文字主颜色" path="main_font_color" :rule="rules">
              <n-color-picker style="width:200px" on-update:value="" v-model:value="formValue.main_font_color" :show-alpha="true" :swatches="swatches" size="small"/>
            </n-form-item>
            <n-form-item label="文字辅颜色" path="font_assist" :rule="rules">
              <n-color-picker style="width:200px" on-update:value="" v-model:value="formValue.font_assist" :show-alpha="true" :swatches="swatches" size="small"/>
            </n-form-item>
              <n-form-item label="使用端" path="assist_color" :rule="rules">
              
                <n-select v-model:value="formValue.type"
                  :style="{ width: '400px' }" 
                  filterable 
                  placeholder="请选择配送方式"
                  :options="portOptions"
                  clearable
                />
           
            </n-form-item>
            <n-form-item label="字体" path="assist_color" :rule="rules">
              <div style="">
                <div :style="'font-family:'+formValue.typeface">
                  字体效果   123456789   /*-0.
                </div>
        
                <n-select v-model:value="formValue.typeface"
                  :style="{ width: '400px' }" 
                  filterable 
                  placeholder="请选择配送方式"
                  :options="Options"
                  clearable
                />
              </div>
            </n-form-item>
            <n-form-item label="tabbar" path="tabbarColor" :rule="rules">
              <div style="display: flex;
                  flex-direction: column;gap:20px">
                <div>
                    <n-radio-group v-model:value="value" name="radiobuttongroup1">
                      <n-radio-button
                        v-for="song in songs"
                        :key="song.value"
                        :value="song.value"
                        :label="song.label"
                      />
                    </n-radio-group>
                  <span style="padding:0 20px">背景颜色</span>
                  <n-color-picker style="width:200px;position: relative;top:10px;" on-update:value="" v-model:value="formValue.tabbarColor" :show-alpha="true" :swatches="swatches" size="small"/>
                </div>
                 <div class="TabberClass" v-for="(item,index) in tabbar" :key="index">
                  <n-input-group>
                    <n-input-group-label> 名字</n-input-group-label>
                    <n-input clearable  v-model:value="item.name" :style="{ width: '100%' }" />
                    <n-button v-if="index+1 == tabbar.length" @click="addTabber" type="primary" ghost>
                      追加Tabber
                    </n-button>
                    <n-button v-else @click="deleteTabber(item,index)" type="primary" ghost>
                      删除
                    </n-button>
                  </n-input-group>
                  <n-input-group>
                    <n-input-group-label>路由</n-input-group-label>
                    <n-input clearable  v-model:value="item.path" :style="{ width: '100%' }" />
                  </n-input-group>
                  <n-input-group>
                    <n-input-group-label>排序</n-input-group-label>
                   
                    <n-input-number clearable  v-model:value="item.sort" :style="{ width: '100%' }" />
                  </n-input-group>
                      <n-input-group>
                  <n-input-group-label>参数值</n-input-group-label>
                    <n-input clearable  v-model:value="item.params" :style="{ width: '100%' }" />
                  </n-input-group>

                  <n-radio-group v-model:value="item.hump" name="radiobuttongroup1">
                      <n-radio-button
                        v-for="song in datou"
                        :key="song.value"
                        :value="song.value"
                        :label="song.label"
                      />
                    </n-radio-group>
                  <div style="margin-top:10px">
                     <div style="display: flex;gap:20px">
                        未选中
                        <div @click="uploadImage(item,index,'icon')" v-if="item.icon" style="height:60px;width:60px;overflow: hidden;display: flex;padding:12px;
                          justify-content: center; align-items: center;">
                          <n-image
                          :preview-disabled="true"
                          style="object-fit: contain;display: flex;
                              justify-content: center;
                              align-items: center;"
                          :src="Https()+item.icon"/>
                      </div>
                      <div v-else @click="uploadImage(item,index,'icon')" class="imageUpload">
                        <n-icon size="24" color="rgb(49, 108, 114)">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                        </n-icon>
                      </div>
                      选中
                      <div @click="uploadImage(item,index,'selectIcon')" v-if="item.selectIcon" style="height:60px;width:60px;overflow: hidden;display: flex;padding:12px;
                        justify-content: center; align-items: center;">
                        <n-image
                        :preview-disabled="true"
                        style="object-fit: contain;display: flex;
                            justify-content: center;
                            align-items: center;"
                        :src="Https()+item.selectIcon"/>
                    </div>
                    <div v-else @click="uploadImage(item,index,'selectIcon')" class="imageUpload">
                      <n-icon size="24" color="rgb(49, 108, 114)">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16"><g fill="none"><path d="M8 2.5a.5.5 0 0 0-1 0V7H2.5a.5.5 0 0 0 0 1H7v4.5a.5.5 0 0 0 1 0V8h4.5a.5.5 0 0 0 0-1H8V2.5z" fill="currentColor"></path></g></svg>
                      </n-icon>
                    </div>
                     </div>
                  </div>
              </div>
              </div>
             
            </n-form-item>
          </n-form>
        </div>
         <div style=" display:flex;justify-content: center;position: relative;right:200px;
                            align-items: center;">
          <n-button @click="AddFun" type="primary" ghost>
            保存数据
          </n-button>
        </div>
      </div>

    </div>

    <div v-else class="Message">
        <n-result
            status="403"
            title="403 禁止访问"
            description="总有些门是对你关闭的"
        >
            <template #footer>
            <n-button @click="goTo('/pluginAdmin/all')">去充钱</n-button>
            </template>
        </n-result>
    </div>
    <div v-if="messageStatus" class="iframeClass">
          <!-- src  h5链接 -->
          <iframe id="iframe" :src="'http://124.221.163.139:8080'" frameborder="0" width="100%" height="100%"></iframe>
        </div>

      <n-modal  v-model:show="uploadShow"
        :mask-closable="false"
        preset="dialog"
        style="width: 1000px;"
        :title="'文件管理'"
        content="你确认?"
        positive-text="确定"
        negative-text="关闭"      
        @positive-click="uploadShow=false"
        @negative-click="uploadShow=false"
        >
    <div class="box-upload">
      <Upload type="1" @selectImage="selectImageFun"/>
    </div>
  </n-modal>
  </div>
</template>

<script setup lang="ts">
import { NAvatar, NButton, NImage, NSwitch, NTag  } from 'naive-ui'
import { sortList } from '@/utils/common.js'
import type { FormInst } from 'naive-ui'
import { nextTick, onMounted, ref } from 'vue'
 import Upload from "@/views/upload/index.vue"
import { Https,setPagination } from "@/utils"
import api from './api'
const tags = ref([])
const router = useRouter()
const route = useRoute()
const pluginInfo = ref({})
const messageStatus = ref(false)
const typeface = ref([])
const tabbar = ref([
  {
    name:'',
    icon:'',
    selectIcon:'',
    params:'',
    path:'',
    sort:'',
    hump:'0'
  }
])
const value = ref('默认')
const uploadShow = ref(false)
 
const portOptions = ref([
  {
    label:'小程序',
    value:'小程序'
  },
  {
    label:'Pc端',
    value:'Pc端'
  },
  {
    label:'H5',
    value:'H5'
  },
  {
    label:'游戏',
    value:'游戏'
  },
])
const songs = ref([
  {
    label:'默认',
    value:'默认'
  },
  {
    label:'图片',
    value:'图片'
  },
])
const datou = ref([
  {
    label:'默认',
    value:'0'
  },
  {
    label:'大图',
    value:'1'
  },
])
onMounted(() => {
    myPluin()
})

const addTabber = () =>{
  tabbar.value.push({
    name:'',
    icon:'',
    selectIcon:'',
    params:'',
    path:'',
    sort:'',
    hump:'0'
  })
}

const deleteTabber = (item,currentIndex) =>{
  // tabber.value.splice(currentIndex, 1);
   tabbar.value = tabbar.value.filter((item1, index) => index !== currentIndex);
}

const selectImageFun =(selectImageList) =>{
  // formValue.value.image = selectImageList[0];  // 只获取第一张图
  iconData.value
  if(iconData.value.type == "icon"){
    tabbar.value[iconData.value.index].icon = selectImageList[0]
  }else if(iconData.value.type == "selectIcon"){
    tabbar.value[iconData.value.index].selectIcon = selectImageList[0]
  }
  uploadShow.value =false
} 

// 推荐颜色
const swatches = ref(['rgba(0, 245, 159, 1)'])
const Options = ref([
  {
    label:`'Courier New', Courier, monospace`,
    value:`'Courier New', Courier, monospace`
  },
  {
    label:`'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif`,
    value:`'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif`
  },
 
  {
    label:`'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif`,
    value:`'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif`
  },
  {
    label:`'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`,
    value:`'Segoe UI', Tahoma, Geneva, Verdana, sans-serif`
  },
  {
    label:`'Times New Roman', Times, serif`,
    value:`'Times New Roman', Times, serif`,
  },
  {
    label:`cursive`,
    value:`cursive`,
  },
  {
    label:`fantasy`,
    value:`fantasy`,
  }
])
async function myPluin(){
  const res: any = await api.checkPluginApi({
    plugin_id:route.query.plugin_id,
    user_id:route.query.user_id,
  })
    
  if(res.code == 200 && res.data){
    pluginInfo.value = route.query
    params.value.user_id = route.query.user_id
    params.value.plugin_id = route.query.plugin_id
    messageStatus.value = true;
    List();
  }else{
    messageStatus.value = false;
  }

}

const pageSizes = [
  {
    label: '10 每页',
    value: 10
  },
  {
    label: '20 每页',
    value: 20
  },
  {
    label: '30 每页',
    value: 30
  },
  {
    label: '40 每页',
    value: 40
  }
]


const pagination = ref({
  total:10
  
})
const formRef = ref<FormInst | null>(null);
const tagsFun = (item) =>{
  console.log(item)
   
}
const iconData = ref({})
const uploadImage = (item,index,type) =>{
  uploadShow.value = true

  iconData.value = {
    index:index,
    item:item,
    type:type
  }
   
}
const showModal = ref(false);
const popTitle:any = ref('添加店铺');
const params = ref({
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  user_id:''
})

const formValue = ref({
  assist_color:null,
  font_assist:null,
  main_color:null,
  main_font_color:null,
  tabbarColor:null,
  tabbar:null,
  typeface:null,
  status:true
})
const rules = {
    assist_color: {
        required: true,
        message: '请输入店铺名称',
        trigger: 'blur'
    },
    font_assist: {
        required: true,
        message: '请输入',
        trigger: 'blur'
    },
    main_color: {
        required: true,
        message: '请输入',
        trigger: 'blur'
    },
    main_font_color: {
        required: true,
        message: '请输入',
        trigger: 'blur'
    },
     tabbarColor: {
        required: true,
        message: '请输入店铺名称',
        trigger: 'blur'
    },
   
    
   
}

const data: any = ref([])
 
const messageParams: any = ref({
  show: false,
  status: '403',
  loading: true,
})

 

async function List() {
  try {
    messageParams.value.loading = true
    const res: any = await api.ListApi(params.value)
    if (res.code == 200) {
      messageParams.value.loading = false
      if(res.data.list.length > 0){
        formValue.value = res.data.list[0]
        if(formValue.value.tabbar){
          tabbar.value = formValue.value.tabbar
        }
      }
      
    }
    else {
      messageParams.value.show = false
      messageParams.value.status = '500'
    }
  }
  catch (error) {
    console.error(error)
  }
}
 
async function submitCallback() {
    messageParams.value.loading = true

    // 排序更换
    
   

    formRef.value?.validate((errors) => {
        if (!errors) {
        formValue.value.user_id = route.query.user_id
        if(popTitle.value == '添加店铺')
            AddFun();
        else
            EditFun();
        }
        else {
        showModal.value = true
        return 
    
        }
    })
}

async function AddFun(){
    
    formValue.value.user_id = route.query.user_id
    formValue.value.plugin_id = route.query.plugin_id
    const newData =  formValue.value
    if(tabbar.value.length > 0){
      // sortList 排序函数    1.排序方式,2.列表，3.排序字段
      newData.tabbar = sortList('asc',tabbar.value,'sort')
    }
    const res: any = await api.AddApi(newData)
    if(res.code == 200){
        List();
        $message.success('添加成功!')
    }else{
        $message.error(res.message)
    }
}

async function EditFun(){
  const res: any = await api.EditApi(formValue.value)
  if(res.code == 200){
    List();
    $message.success('编辑成功!')
  }else{
    $message.error(res.message)
  }
}


function toStore(item){
    router.push({
      path:'/plugin/goodsPlugin/index',
      query:{
        user_id:route.query.user_id,
        store_id:item.businessId,
      }
    })
    // router.push('/plugin/goodsPlugin/index')
}
</script>

<style scoped>
 .cotentClass {
    position: relative;
    height: 80vh;
    overflow-y: scroll;
    display: flex;
    justify-content: space-between;
    padding: 20px;
    flex-direction: column;
}
.themeClass{

}
.iframeClass{
  position: absolute;
  height: 650px;
  width: 320px;
  border: 20px solid #eee;
  border-radius: 16px;
  bottom: 0px;
  right:20px
}
 
 
.Message{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 200px;
}
.TabberClass{
  background: #f4f4f4;
  width: 100%;
  padding: 10px;
  gap: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.imageUpload{
  width: 60px;
  height:60px;
  border:1px solid #eee;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  align-items: center;
}
.imageUpload:hover{
  border:1px solid rgb(49, 108, 114);
}
</style>
